<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="space-between">
          <!-- 添加分类按钮 -->
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              @click="isShowDialog = true"
            >添加分类</el-button>
          </el-col>
          <!-- 搜索框 -->
          <el-col :span="12">
            <el-input v-model="keyword" size="small" placeholder="请输入关键词">
              <el-button slot="append" icon="el-icon-search" @click="searchFn" />
            </el-input>
          </el-col>
        </el-row>
        <!-- .........分割线..... -->
        <el-divider />
        <!-- 表格 :header-cell-style表头内容居中 cell-style表单内容居中 -->
        <el-table :data="categoryList" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="image" label="图片" width="180">
            <template slot-scope="{ row }">
              <img :src="row.image" alt="" class="picture">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                size="small"
                type="primary"
                @click="editFn(row.id)"
              >编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="delFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- .........分割线..... -->
        <el-divider />

        <!-- 分页器 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            :current-page="page"
            @current-change="currentChangeFn"
          />
        </el-row>
      </el-card>

      <!-- 添加分类弹窗 -->
      <el-dialog :title="formData.id ? '编辑分类':'新增分类'" :visible.sync="isShowDialog" @close="cancelFn">
        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="50px"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="描述" prop="desc">
            <el-input v-model="formData.desc" type="textarea" :rows="5" />
          </el-form-item>
          <!-- 上传照片 -->
          <el-form-item label="封面" prop="image">
            <!-- 放置上传图片 -->
            <ImageUpload ref="imageUpload" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="confirmFn">确 定</el-button>
          <el-button @click="cancelFn">取 消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { category } from '@/api/category' // 获取分类列表的接口
import { addCategory } from '@/api/category' // 获取新增分类接口
import { delCategory } from '@/api/category' // 获取删除分类接口
import { editCategory } from '@/api/category' // 获取编辑分类接口
import { appointCategory } from '@/api/category' // 获取指定分类接口
import { categoryCount } from '@/api/category' // 获取分类数量 也就是总页码的数量
export default {

  data() {
    return {
      isShowDialog: false, // 弹窗的显示隐藏
      formData: {
        // 表单内容
        title: '', // 标题
        desc: '', // 描述
        image: ''
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { max: '20', message: '标题字符在20个字内', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { max: '100', message: '描述在100个字内', trigger: 'blur' }
        ]
      },
      categoryList: [], // 分类列表
      curId: null, // 编辑分类id
      pagesize: 5, // 条数
      page: 1, // 页码
      total: 0, // 总数量
      keyword: '', // 输入框搜索
      titleContains: '' // 模糊搜索
    }
  },
  async created() {
    // 调用封装的分类列表函数--渲染分类内容
    await this.getCategory()
  },
  methods: {
    // 封装分类列表--渲染分类内容
    async getCategory() {
      // 声明一个变量计算当前开始获取的下标
      const start = (this.page - 1) * this.pagesize
      // 获取分类列表的接口
      this.categoryList = await category({
        _limit: this.pagesize, // 每页的长度
        _start: start, // 开始的下标
        title_contains: this.titleContains// 模糊搜索title
      })

      // 调用接口获取总total的数量
      this.total = await categoryCount({ title_contains: this.titleContains })
    },
    // 编辑事件
    async editFn(id) {
      // 保存id
      this.curId = id
      // 显示弹窗
      this.isShowDialog = true

      // 调用编辑分类接口---回显数据  把id赋值回给formData表单数据中保存起来
      this.formData = await appointCategory(id)
      // console.log(this.formData, 148)
      // 头像回显
      this.$refs.imageUpload.fileList.push({
        url: this.formData.image
      })
    },
    // 点击确定 添加分类
    async confirmFn() {
      try {
        // 获取封面地址
        const file = this.$refs.imageUpload.fileList[0]
        // console.log(176, file)
        const url = file.url
        // 判断图片的状态值是否上传成功 没有上传完成 不给保存 提示未上传成功
        if (file && file.status !== 'success') {
          return this.$message.warning('图片未上传成功,请等待')
        }
        // 校验表单
        await this.$refs.formRef.validate()
        // 根据id判断是编辑还是新增
        if (this.formData.id) {
          // 调用编辑接口
          await editCategory({
            ...this.formData, image: file ? url : ''
          })
        } else {
          // 调用新增分类接口
          await addCategory({ ...this.formData,
          // 是否有上传图片 如果有就显示图片 没上传就显示空 不然会报错
            image: file ? url : '' })
        }
        // 刷新页面
        this.getCategory()
        // 关闭弹窗
        this.cancelFn()
      } catch (error) {
        console.log(error)
      }
    },
    // 取消事件
    cancelFn() {
      // 清除校验规则
      this.$refs.formRef.resetFields()
      // 清空表单内容
      this.formData = {
        title: '', // 标题
        desc: '', // 描述
        image: ''
      }
      // 关闭编辑清空上传图片的内容
      this.$refs.imageUpload.fileList = []
      // 关闭弹窗
      this.isShowDialog = false
    },
    // 删除事件
    async delFn(id) {
      try {
        // 二次询问框
        await this.$confirm('是否确定要删除?')
        await delCategory(id)
        // 刷新页面
        this.getCategory()
        // 提示
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error, '删除失败')
      }
    },
    // 点击分页事件
    currentChangeFn(newPage) {
      this.page = newPage
      // 刷新页面 重新渲染分类内容
      this.getCategory()
    },
    // 点击搜索事件
    async searchFn() {
      // console.log(this.keyword)
      this.titleContains = this.keyword
      this.page = 1
      // 调用接口重新渲染分类内容
      const res = await this.getCategory()
      console.log(res)
      // 搜索完后清空
      this.keyword = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.picture {
  width: 150px;
  height: 120px;
  object-fit: contain;
}
</style>
